<template>
    <UxDialog :visible="!!dialog_clarity" @close="dialog_clarity && dialog_clarity(false)">
        <div class="dialog-clarity">
            <h2>Prompt information</h2>
            <p>If the image used in your template has a low sesolution, the actual printing outcome may appear pixelated as the low-res rendering below. Do you still want to save the template?</p>
            <figure>
                <img src="https://img.podpartner.com/static/images-20230202/designer-clarity.png" />
            </figure>
            <fieldset>
                <button @click="dialog_clarity(false)" type="primary">Cancel</button>
                <button @click="dialog_clarity(true)">Save</button>
            </fieldset>
        </div>
    </UxDialog>
</template>
<script>
import { mapGetters, mapState } from "vuex";

export default {
    data () {
        return {
            dialog_clarity: null,
        };
    },
    computed: {
        ...mapGetters("designer", {
            models: "getModels",
            platens: "getPlatens",
            pieces: "getPieces",
        }),
    },
    methods: {
        getClarity () {

            // 最小dei
            // 像素1:1时，dpi为300
            // 图片像素大于1:1像素条件下的75/300，即可

            let min_dpi = 75; // 最小dpi
            let now_dpi = 300; // 当前dpi
            let pieces = this.pieces;
            let unclear = []; // 不清晰列表

            pieces.map((piece) => {
                let scale = Math.max(
                    piece.real_width / piece.canvas_width,
                    piece.real_height / piece.canvas_height
                );
                (piece.layers || []).map((layer) => {
                    if (layer.type != "image") {
                        // 不是图片
                    } else {
                        let minW = (layer.w * scale * min_dpi) / now_dpi;
                        let minH = (layer.h * scale * min_dpi) / now_dpi;

                        let clearX = layer.cutW >= minW;
                        let clearY = layer.cutH >= minH;

                        !(clearX && clearY) && unclear.push(layer);
                    }
                });
            });

            return unclear.length == 0;

        },
        check () {

            // 检查清晰度
            if (this.getClarity()) {
                return Promise.resolve();
            } else {
                return new Promise((resolve, reject) => {
                    this.dialog_clarity = (save) => {
                        if (save) {
                            this.dialog_clarity = null;
                            resolve()
                        } else {
                            this.dialog_clarity = null;
                            reject('Clarity cancel');
                        }
                    }
                })
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.dialog-clarity {
    width: 388px;
    box-sizing: border-box;
    padding: 14px;

    h2 {
        margin-top: 10px;
        text-align: center;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
    }

    p {
        margin-top: 14px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 20px;
    }

    figure {
        display: block;
        position: relative;
        margin-top: 24px;
        padding-bottom: 54.52%;

        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    fieldset {
        margin-top: 24px;
        display: flex;
        flex-direction: column;

        button {
            height: 38px;

            & + button {
                margin-top: 8px;
            }
        }
    }
}
</style>
